<template>
    <div class="rechargeMaxBox" >
        <div class="color333 flexSB">
            <div class="colorFFF size24 sizeCenter marginTop30" style="width: 100%;text-align: right;">{{$store.state.config.coin_name}}充值</div>
            <div @click="onJump('/recharge/recharge-record')" class="block color999 hand" style="width: 100%;text-align: right;margin-top: 100px;">充值记录
                <i class="el-icon-right" ></i>
            </div>
        </div>

        <!-- <div class="colorFFF size24 sizeCenter marginTop30">金币充值</div> -->
        <div class style="width: 85%;margin: 30px auto">
            <div class="colorFFF">请选择充值金额 <span>充值1元=10{{$store.state.config.coin_name}}</span></div>
            <el-row :gutter="20" class="marginTop30">
                <el-col :key="index" :span="4" v-for="(item, index) in recharge_select">
                    <div :class="{ selectBox: index == select }" @click="select = index" class="radius10 rechargeBox flexFCC hand" style="position: relative;">
                        <div class="size18 colorFF1C6D flexSB" style>
                            <img alt src="@/assets/gift/jb.png" srcset style="width: 20px;" />
                            <span class="colorFF8F3E">{{item.balance}}</span>
                        </div>

                        <div class="size14 color999 marginTop10">￥{{item.active_price}}</div>

                        <!-- <div class="recommend colorFFF" v-if="index == 2">推荐</div> -->
                    </div>
                </el-col>
            </el-row>

            <div class="flexFS marginTop50">
                <div style="width: 100px;" class="colorFFF">其他金额</div>
                <el-input clearable placeholder="请输入充值金额" style="width: 250px;" type="number" v-model="form.money"></el-input>
            </div>

            <div class="colorFF8F3E marginTop20 ml-100" v-if="!form.money">提示：充值1元兑换{{balance_rate}}{{$store.state.config.coin_name}}</div>
            <div class="flexFS marginTop20" style="margin-left: 100px;" v-else>
                <div>到账金额</div>
                <div class="size18 colorFF1C6D flexFS" style="margin-left: 10px;">
                    <img alt src="@/assets/gift/jb.png" srcset style="width: 20px;" />
                    <span class="colorFF8F3E">{{ form.money * 10 }}</span>
                </div>
            </div>

            <div class="marginTop70">
                <el-button :loading="confirm_loading" @click="rechargeFun" class style="width: 200px;background-color: #FF1C6D;border: none;margin-left: 100px;" type="primary">立即充值</el-button>
            </div>
        </div>

        <el-dialog :before-close="handleClose" :visible.sync="dialogVisible" title width="50%">
            <div class="sizeCenter">
                <div v-if="alipay_order || wechat_order">
                    <span class="size25 color333">支付金额</span>
                    <span class="colorFF1C6D size2512" style="margin-left: 10px;">￥</span>
                    <span class="size25 colorFF1C6D" v-if="payment=='wechat'">{{ wechat_order.money }}</span>
                    <span class="size25 colorFF1C6D" v-else>{{ alipay_order.money }}</span>
                </div>
                <span class="dialog-footer" slot="footer">
                    <!-- <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
                </span>
                <div class="codeBox" v-loading="confirm_loading">
                    <vue-qrcode :options="{ width: 250 }" :value="payment=='wechat'? wechat_qrcode :alipay_qrcode " style="margin:0 auto ;"></vue-qrcode>
                    <div @click="rechargeFun" class="expire-order cursor-pointer" v-if="order_expire">订单已失效，点击刷新</div>
                </div>

                <div v-if="payment=='wechat'">请使用微信扫码支付</div>
                <div v-else>请使用支付宝扫码支付</div>

                <div class="flexSBB" style="width: 37%; margin: 0 auto;margin-top: 50px;">
                    <div class="color333">请选择支付方式</div>
                    <div class="flexSB color333 boxSizeing marginTop30" style="width: 200px">
                        <div :class="{ selectBox2: payment == item.type }" :key="index" @click="choosePayment(item)" class="flex align-center color333 hand" style="padding: 8px" v-for="(item, index) in paymentType">
                            <img :src="item.icon" alt srcset width="20px" />
                            <span class="ml-6" style="line-height:0px">{{ item.title }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>

        <div class="text-center color-fff font-15 width-100% height-50">
                    <el-image :src="require('@/assets/gif/global_loading.gif')" fit="cover" style="width: 40px;height:30px;" v-show="page_loading"></el-image>
                </div>
    </div>
</template>

<script>
import VueQrcode from '@chenfengyuan/vue-qrcode'
export default {
    components: {
        VueQrcode,
    },
    data() {
        return {
            select: -1,
            form: {
                money: '',
            },
            dialogVisible: false,
            paymentType: [
                {
                    icon: require('@/assets/wallet/wx.png'),
                    title: '微 信',
                    type: 'wechat',
                },
                {
                    icon: require('@/assets/wallet/zfb.png'),
                    title: '支付宝',
                    type: 'alipay',
                },
            ],
            payment: 'wechat',
            balance_rate: null,
            recharge_select: [],
            page_loading: false,
            confirm_loading: false,
            wechat_qrcode: null,
            alipay_qrcode: null,
            wechat_order: null,
            alipay_order: null,
            positionTimer: null,
            order_expire: false,
        }
    },
    mounted() {
        this.getConfig()
    },
    methods: {
        getConfig() {
            this.$request.get('/config/config/balance_rate').then((res) => {
                this.balance_rate = res.result
            })
            this.page_loading = true
            this.$request
                .get('/recharge-money/index', { page: 1, size: 1000 })
                .then((res) => {
                    this.recharge_select = res.items
                })
                .catch((error) => {})
                .finally((res) => {
                    this.page_loading = false
                })
        },
        rechargeFun() {
            let recharge_product = this.recharge_select[this.select]

            if (!this.form.money && !recharge_product) {
                this.$message({
                    message: '请输入充值金额！',
                    type: 'warning',
                })
                return
            }
            this.toPay()
        },
        checkOrder() {
            const that = this
            this.positionTimer = setInterval(() => {
                // if (that.resultArr.length < that.times) {
                //     clearInterval(that.positionTimer)
                //     that.positionTimer = null
                //     console.log(that.times)
                // } else {
                //     // 分批部署基站
                //     if (that.times < that.resultArr.length) {
                //         that.deployBaseStation()
                //         console.log('渲染数组的第' + that.times + '项')
                //     }
                //     that.times++
                // }
                let query = {}
                let money
                if (that.payment == 'wechat') {
                    query.trade_no = that.wechat_order.trade_no
                    money = that.wechat_order.balance
                } else {
                    query.trade_no = that.alipay_order.trade_no
                    money = that.wechat_order.balance
                }
                that.$request
                    .get('/recharge/trade_status', query)
                    .then((res) => {
                        if (res.trade_status != 0) {
                            clearInterval(this.positionTimer)
                            this.positionTimer = null
                            if (res.trade_status == 1) {
                                this.$store.dispatch('user/incrementBalance', money)
                                this.$message.success('充值成功')
                                this.dialogVisible = false
                            } else {
                                this.order_expire = true
                            }
                        }
                    })
                    .catch((error) => {})
            }, 1000)
        },
        toPay() {
            let param = {}
            param.payment = this.payment
            if (this.form.money) {
                param.money = parseFloat(this.form.money)
            } else {
                let recharge_product = this.recharge_select[this.select]
                param.product_id = recharge_product.id
                param.money = parseFloat(recharge_product.active_price)
            }
            if (this.positionTimer) {
                clearInterval(this.positionTimer)
            }
            param.way = 'native'
            this.confirm_loading = true
            this.$request
                .post('/recharge/create', param)
                .then((res) => {
                    this.dialogVisible = true
                    this.order_expire = false
                    this.$nextTick(() => {
                        if (this.payment == 'wechat') {
                            this.wechat_qrcode = res.pay_info.code_url
                            this.wechat_order = res.order
                        } else {
                            this.alipay_order = res.order
                            this.alipay_qrcode = res.pay_info
                        }
                        this.checkOrder()
                    })
                })
                .catch((error) => {})
                .finally((res) => {
                    this.confirm_loading = false
                })
        },
        choosePayment(item) {
            this.payment = item.type
            this.toPay()
        },
        handleClose() {
            this.dialogVisible = false
        },
        onJump(url) {
            this.$router.push(url)
        },
    },
}
</script>

<style lang="scss" scoped>
.rechargeBox {
    height: 96px;
     background-color: #fffbef;
    box-sizing: border-box;
}
.selectBox2{
    border: 1px solid #ff1c6d;
    box-shadow: 0 0 8px #fde0ea;
}

.recommend {
    position: absolute;
    top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #ff1c6d;
    font-size: 12px;
    width: 44px;
    height: 22px;
    text-align: center;
    line-height: 22px;
}

.codeBox {
    padding: 10px;
    border: 1px dashed #999;
    width: 250px;
    margin: 30px auto;
    position: relative;
}
.selectBox {
    // border: 1px solid #ffc9dc;
    background-image: linear-gradient(to bottom , #FF5994, #FF1C6D);
    // box-sizing: border-box;
}
</style>